<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="collegeId" placeholder="请选择学院">
          <el-option
            v-for="item in CollegeList"
            :key="item.collegeId"
            :label="item.collegeName"
            :value="item.collegeId"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="showChart()"
        >获取图表</el-button
      >
      <div class="chart">
        <div
          id="myChart"
          :style="{ width: '500px', height: '500px' }"
          class="mycharts"
        ></div>
        <div
          id="myChart2"
          :style="{ width: '500px', height: '500px' }"
          class="mycharts2"
        ></div>
      </div>
    </el-form>
  </div>
</template>

<script>
import studentApi from "@/api/student";
import collegeApi from "@/api/college";
import classApi from "@/api/class";
export default {
  name: "eCharts",
  created() {
    this.getCollegeList();
  },
  data() {
    return {
      list: [], //男女性别饼图数据
      CollegeList: [],
      collegeId: 1,
      classes: [],
      counts: [],
    };
  },

  methods: {
    getClasses() {},
    getCollegeList() {
      collegeApi.getCollegeList().then((res) => {
        this.CollegeList = res.data.page.list;
      });
    },
    showChart() {
      studentApi.getRedio(this.collegeId).then((res) => {
        console.log(this.collegeId);
        this.list = res.data.list;
      });
      classApi.getClassDatas(this.collegeId).then((res) => {
        this.classes = res.data.classNames;
        this.counts = res.data.counts;
        console.log(this.classes);
        console.log(this.counts);
        this.drawEcharts();
        this.drawEcharts2();
      });
    },
    drawEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var option = {
        title: {
          text: "男女比例图",
          // subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: "50%",
            data: this.list,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    drawEcharts2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "人数统计表",
          // subtext: "Fake Data",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: this.classes,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.counts,
            type: "bar",
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>


<style>
.mycharts {
  margin-top: 40px;
}
.mycharts2 {
  margin-top: 40px;
  margin-left: 80px;
}
.chart {
  display: flex;
}
</style>